<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>初识Vue</title>
    <!--引入Vue开发版-->
    <script type="text/javascript" src="../js/vue.js"></script>

    <!-- <script type="text/javascript" src="../js/vue.min.js"></script> -->
</head>
<body>

    <!--
        初识Vue:
            1 想让Vue工作,必须创建一个Vue示例,且要传入一个配置对象;
            2 root容器里的代码依然符合html规范,只不过混入了一些特殊的Vue语法;
            3. root容器里面的代码被称为【Vue模板】
            4. Vue实例和容器是一一对应的
            5. 真实开发中只有一个Vue实例,并且会配合着组件一起使用;
            6.{{xxx}}中的xxx要写js表达式,且xxx可以自动读取到data中的所有属性;
            7. 一旦data中的数据发生改变,那么页面中用到该数据的地方会自动更新;
            
             解析流程: 先加载容器 然后有的script中的Vue实例> 然后解析el 相关的容器

             注意区分: js表达式 和 js代码(语句)
                  1.表达式: 一个表达式会生成一个值,可以放在任何一个需要值的地方.
                     (1). a
                     (2). a+b
                     (3). demo(1)
                     (4). xy === y ? 'a':'b'
                   2.js代码(语句)
                      (1). if(){}
                      (2). for(){}  
    -->
    <!-- 准备好一个容器 -->
    <div id="root">
        <!--插值写法 {{}}  -->
        <h1>Hello, {{ name.toUpperCase() }} ,{{address}}, {{ Date.now() }}</h1>
    </div>

    <div class="a">
        <!--插值写法 {{}}  -->
        <h1>Hello, {{ name.toUpperCase() }} ,{{address}}, {{ Date.now() }}</h1>
    </div>

 
</body>
    <script type="text/javascript">
         Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示

         //创建Vue示例
         //容器
        new Vue({
            //el:document.getElementById('root') 经典写法
            /**
             * el用于指定当前Vue示例为那个容器服务,
             * 值通常为css选择器字符串 id选择器# 类选择器是.
            */
            el: '#root',
            /**
             * data中用于存储数据,数据供el所指定的容器去使用,
             * 值我们暂时先写一个对象。
             */
            data:{//
                name:'翔宇医疗',
                address: '河南内黄'
            }
        })

         //创建Vue示例
         //容器
         new Vue({
            //el:document.getElementById('root') 经典写法
            /**
             * el用于指定当前Vue示例为那个容器服务,
             * 值通常为css选择器字符串 id选择器# 类选择器是.
            */
            el: '.a',
            /**
             * data中用于存储数据,数据供el所指定的容器去使用,
             * 值我们暂时先写一个对象。
             */
            data:{//
                name:'翔宇医疗',
                address: '河南内黄'
            }
        })
       
    </script>
</html>